<template>
  <div class="graph-con">
    <div class="loading" v-if="loading"><i class="el-icon-loading"></i></div>
    <div v-if="!isData" class="is-data">{{ text }}</div>
    <div id="container" ref="graph" style="height: 100%"></div>
    <NodeConextMenu @gotoList="gotoList"   @handleGotoTech="handleGotoTech" id='nodeContextMenu'/>
  </div>
</template>

<script>
import forceGraph from "./forceGraph";
import fetchGraphData from "./fetchGraphData";
import NodeConextMenu from "../child/NodeConextMenu";
export default {
  components:{
    NodeConextMenu,
  },
  props: {
    tabsDataItem: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      graphData: {},
      num: 2,
      loading: false,
      text: "暂无数据。。。",
      isData: true,
      graph: null,
      res:{},
      searchTxt:'',
      nodeObject:{},//右键后保存此object
    };
  },
  mounted() {
    this.graph = forceGraph.createGraph(this.$refs.graph);
    forceGraph.sendThis(this);
  },
  methods: {
    //增加节点
    addNode(item){
      this.$get(this.$Url.technology.childNodeList, {
        parent: item.getModel().label,
      }).then((res) => {
        const expandData = fetchGraphData.processData(
          res.data,
          this.graph.targetNodeName
        );
        this.graph.expandNode(item, expandData, this.graph.targetNodeName);
        this.canvasClick()
        this.graph.layout();
      });
    },
    // 左键单击事件
    clickNode(item) {
      this.$emit("clickNode", item);
    },
    //双击事件
    dblclickNode(item){
      this.addNode(item)
    },
    //右键单击事件
    contextMenuNode(item){
      this.nodeObject = item;
      // 1、弹出框 有四部分信息 1展开下级2查询企业3查询人才4技术分析
    },
    //跳转至列表页面
    gotoList(type){
      this.$emit('canvasClick')
      let model = this.nodeObject._cfg.model;
      let newTab = this.$router.resolve({
        name:'PersAndCompList',
        query:{
          id:model.id,
          name:model.label,
          tabType:type,
          pageType:"技术链",
        }
      })
      window.open(newTab.href, '_blank')
    },
    // 跳转至技术分析
    handleGotoTech(){
      this.$emit('canvasClick')
      let newTab = this.$router.resolve({
        name:'TIAnalysis',
        query:{
          name:this.nodeObject._cfg.model.label,
        }
      })
      window.open(newTab.href, '_blank')
    },

    // 跳转至技术分析
    handleGotoTech(item){
      this.$emit('canvasClick')
      let newTab = this.$router.resolve({
        name:item.routerName,
        query:{
          label:item.label,
          keyword:this.nodeObject._cfg.model.label,
          type:item.type || 0,
        }
      })
      window.open(newTab.href, '_blank')
    },
    // canvas点击事件
    canvasClick(){
     this.$emit('canvasClick')
    },
    
    // 获取全部节点数据
    getAllData(item) {
      this.isData = true;
      this.loading = true;
      this.$get(this.$Url.technology.allNodeList, {
        parent: item.name,
        num: this.num,
      }).then((res) => {
        if(!res.data){
          return
        }
        this.graphData = fetchGraphData.processData(res.data, item.name);
        //默认查出关联中心点信息
        //根据name取出中心点
        let centerNode = this.graphData.nodes.find(val => val.label === item.name)
        this.$emit('getCenterNode',centerNode)
        this.graph.targetNodeName = item.name;
        this.graph.stopAnimate();
        this.graph.clear();
        this.loading = false;
        if (
          this.graphData.nodes.length > 0 &&
          this.graphData.edges.length > 0
        ) {
          this.graph.data(this.graphData);
          this.graph.render();
          //默认查出关联中心点信息
        } else {
          this.isData = false;
        }
      });
    },
  },
};

</script>

<style lang="scss" scoped>
.graph-con {
  flex: 1;
  width:100%;
  height: 100%;
  position: relative;
  #nodeContextMenu{
    display:none;
  }
  .is-data {
    height: 100%;
    width: 100%;
    font-size: 0.2rem;
    text-align: center;
    line-height: 600px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .loading {
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 60px;
    text-align: center;
    color: #524cab;
    line-height: 600px;
    font-weight: 700;
  }
}
</style>
